let id = 0;
export const angle = {
  inserted(el, binding) {

    let value = binding.value || {};
    // 折角长度
    let angleLength = value.angleLength || 10;
    // 线宽
    let lineWidth = value.lineWidth || 3;
    // 颜色
    let color = value.color || '#fff';

    let top = value.top;

    let left = value.left;

    let { width, height } = el.getBoundingClientRect();

    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    canvas.width = width + lineWidth * 2;
    canvas.height = height + lineWidth * 2;
    canvas.id = 'v-angle-' + id;


    let positionProperty = getComputedStyle(el).position

    if (positionProperty == 'static') {
      console.warn(`该元素的position属性为${positionProperty}, 已设置为 relative`);
      el.style.position = 'relative'
    }

    canvas.style.position = 'absolute'
    canvas.style.top = (top?top:-lineWidth) + 'px'
    canvas.style.left = (left?left:-lineWidth) + 'px'
    canvas.style.pointerEvents = 'none'

    ctx.save();
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    ctx.rect(lineWidth / 2, lineWidth / 2, canvas.width - lineWidth, canvas.height - lineWidth);
    ctx.stroke();
    ctx.clearRect(angleLength, 0, canvas.width - angleLength * 2, canvas.height);
    ctx.clearRect(0, angleLength, canvas.width, canvas.height - angleLength * 2);
    ctx.restore();
    el.append(canvas);
    id++
  }

}



export default {
  angle
}
